<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const currentImageIndex = ref(0);
const isTransitioning = ref(false);

const images = [
  new URL("../assets/cc1.webp", import.meta.url).href,
  new URL("../assets/cc2.webp", import.meta.url).href,
  new URL("../assets/cc3.webp", import.meta.url).href,
];

const features = [
  {
    icon: "🏎️",
    title: "动感设计",
    desc: "流线美学",
    color: "#ff6b6b",
    glow: "rgba(255, 107, 107, 0.3)",
  },
  {
    icon: "💎",
    title: "豪华内饰",
    desc: "尊贵体验",
    color: "#4ecdc4",
    glow: "rgba(78, 205, 196, 0.3)",
  },
  {
    icon: "⚡",
    title: "卓越性能",
    desc: "强劲动力",
    color: "#45b7d1",
    glow: "rgba(69, 183, 209, 0.3)",
  },
  {
    icon: "🌊",
    title: "流线型设计",
    desc: "风阻优化",
    color: "#96ceb4",
    glow: "rgba(150, 206, 180, 0.3)",
  },
  {
    icon: "🔥",
    title: "强劲动力",
    desc: "涡轮增压",
    color: "#feca57",
    glow: "rgba(254, 202, 87, 0.3)",
  },
  {
    icon: "🛡️",
    title: "智能安全",
    desc: "全面保护",
    color: "#ff9ff3",
    glow: "rgba(255, 159, 243, 0.3)",
  },
  {
    icon: "🎵",
    title: "品质音响",
    desc: "殿堂级音效",
    color: "#a8e6cf",
    glow: "rgba(168, 230, 207, 0.3)",
  },
  {
    icon: "🌟",
    title: "智能科技",
    desc: "未来体验",
    color: "#dDA0DD",
    glow: "rgba(221, 160, 221, 0.3)",
  },
];

const nextImage = () => {
  if (isTransitioning.value) return;
  isTransitioning.value = true;
  currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
  setTimeout(() => {
    isTransitioning.value = false;
  }, 800);
};

const prevImage = () => {
  if (isTransitioning.value) return;
  isTransitioning.value = true;
  currentImageIndex.value =
    (currentImageIndex.value - 1 + images.length) % images.length;
  setTimeout(() => {
    isTransitioning.value = false;
  }, 800);
};

let touchStartX: number | undefined = 0;
let touchEndX: number | undefined = 0;

const handleTouchStart = (e: TouchEvent) => {
  touchStartX = e?.changedTouches[0]?.screenX;
};

const handleTouchEnd = (e: TouchEvent) => {
  touchEndX = e?.changedTouches[0]?.screenX;
  handleSwipe();
};

const handleSwipe = () => {
  const swipeThreshold = 50;
  const diff = touchStartX || 0 - (touchEndX || 0);

  if (Math.abs(diff) > swipeThreshold) {
    if (diff > 0) {
      nextImage();
    } else {
      prevImage();
    }
  }
};

let autoPlayInterval: number | null = null;

const startAutoPlay = () => {
  autoPlayInterval = window.setInterval(() => {
    nextImage();
  }, 3500);
};

const stopAutoPlay = () => {
  if (autoPlayInterval) {
    clearInterval(autoPlayInterval);
    autoPlayInterval = null;
  }
};

onMounted(() => {
  startAutoPlay();
});

onUnmounted(() => {
  stopAutoPlay();
});
</script>

<template>
  <div class="volkswagen-cc-showcase">
    <!-- 主展示区域 -->
    <div
      class="main-showcase"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      <div class="showcase-background"></div>

      <div class="showcase-content">
        <div class="title-section">
          <h1 class="main-title">Volkswagen CC</h1>
          <p class="subtitle">优雅与运动的完美融合</p>
        </div>

        <div class="image-showcase">
          <div class="image-track">
            <img
              v-for="(image, index) in images"
              :key="index"
              :src="image"
              :class="[
                'showcase-image',
                { active: index === currentImageIndex },
              ]"
            />
          </div>

          <div class="showcase-controls">
            <button @click="prevImage" class="showcase-btn prev-btn">
              <div class="btn-icon"></div>
            </button>
            <button @click="nextImage" class="showcase-btn next-btn">
              <div class="btn-icon"></div>
            </button>
          </div>

          <div class="image-dots">
            <div
              v-for="(image, index) in images"
              :key="index"
              :class="['dot', { active: index === currentImageIndex }]"
              @click="currentImageIndex = index"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 特性展示区 -->
    <div class="features-showcase">
      <div class="features-container">
        <div
          v-for="(feature, index) in features"
          :key="index"
          class="feature-card"
          :style="{
            '--card-color': feature.color,
            '--glow-color': feature.glow,
            animationDelay: `${index * 0.1}s`,
          }"
        >
          <div class="card-glow"></div>
          <div class="card-content">
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部视觉区 -->
    <div class="visual-footer">
      <div class="footer-bg"></div>
      <div class="footer-content">
        <h2 class="footer-title">Experience Excellence</h2>
        <p class="footer-subtitle">驾驶大众CC，感受德系精工品质</p>
        <div class="beian-info">
          <p>京ICP备2025148226号-1</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.volkswagen-cc-showcase {
  min-height: 100vh;
  background: #000;
  color: white;
  font-family: "Arial", sans-serif;
  overflow-x: hidden;
}

/* 主展示区域 */
.main-showcase {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.showcase-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%
    ),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  animation: backgroundPulse 8s ease-in-out infinite;
}

@keyframes backgroundPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.showcase-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  padding-top: 0vh;
}

.title-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  perspective: 1000px;
  background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.4) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 2rem;
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  animation: titleSectionGlow 6s ease-in-out infinite;
}

.title-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: titleSectionScan 6s linear infinite;
  z-index: -1;
}

.title-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(255,255,255,0.02) 100%);
  z-index: -1;
}

.title-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    rgba(255,107,107,0.1) 0%, 
    rgba(78,205,196,0.1) 25%, 
    rgba(69,183,209,0.1) 50%, 
    rgba(150,206,180,0.1) 75%, 
    rgba(255,107,107,0.1) 100%);
  background-size: 400% 100%;
  z-index: -2;
  animation: neonGlow 8s ease infinite;
}

.main-title {
  font-size: 3rem;
  font-weight: 900;
  background: linear-gradient(45deg, #ffffff, #cccccc, #ffffff, #cccccc, #ffffff, #cccccc);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.3);
  margin-bottom: 0.5rem;
  animation: titleGlow 4s ease-in-out infinite, titleFloat 6s ease-in-out infinite;
  letter-spacing: 3px;
  position: relative;
  transform-style: preserve-3d;
}

.main-title::before {
  content: 'Volkswagen CC';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleScan 3s linear infinite;
  z-index: -1;
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: subtitleFloat 3s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

@keyframes titleGlow {
  0%,
  100% {
    background-position: 0% 50%;
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.5), 0 0 100px rgba(255, 255, 255, 0.3);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.8), 0 0 150px rgba(255, 255, 255, 0.5);
  }
}

@keyframes titleFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(0.5deg);
  }
  75% {
    transform: translateY(-3px) rotate(-0.5deg);
  }
}

@keyframes subtitleFloat {
  0%,
  100% {
    transform: translateY(0);
    background-position: 0% 50%;
  }
  50% {
    transform: translateY(-10px);
    background-position: 100% 50%;
  }
}

@keyframes titleScan {
  0% {
    background-position: -200% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

@keyframes titleSectionGlow {
  0%,
  100% {
    box-shadow: 
      0 20px 60px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 0 0 1px rgba(0,0,0,0.1);
    border-color: rgba(255,255,255,0.15);
  }
  50% {
    box-shadow: 
      0 25px 80px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.3),
      0 0 0 1px rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
  }
}

@keyframes titleSectionScan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes neonGlow {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.2;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.4;
  }
}

/* 图片展示区域 */
.image-showcase {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.image-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-image {
  position: absolute;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  transform: scale(1.1);
  filter: blur(10px);
}

.showcase-image.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  z-index: 5;
}

/* 控制按钮 */
.showcase-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 3rem;
  transform: translateY(-50%);
  z-index: 10;
}

.showcase-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.showcase-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.showcase-btn:hover::before {
  width: 100%;
  height: 100%;
}

.showcase-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.2);
}

.btn-icon {
  width: 20px;
  height: 20px;
  border: solid white;
  border-width: 3px 3px 0 0;
  transition: all 0.3s ease;
}

.prev-btn .btn-icon {
  transform: rotate(-135deg);
  margin-left: 5px;
}

.next-btn .btn-icon {
  transform: rotate(45deg);
  margin-right: 5px;
}

/* 指示点 */
.image-dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.5rem;
  z-index: 10;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

.dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}

.dot.active::before {
  width: 100%;
  height: 100%;
}

.dot.active {
  transform: scale(1.5);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

/* 特性展示区 */
.features-showcase {
  padding: 8rem 2rem;
  background: linear-gradient(180deg, #000 0%, #111 100%);
  position: relative;
}

.features-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
}

.features-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 25px;
  padding: 3rem 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  animation: cardFloat 2s ease-in-out infinite;
  animation-delay: var(--animation-delay, 0s);
}

.feature-card:hover {
  transform: translateY(-20px) scale(1.02);
  border-color: var(--card-color);
  box-shadow:
    0 30px 80px var(--glow-color),
    0 0 50px var(--glow-color);
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    var(--glow-color) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.feature-card:hover .card-glow {
  opacity: 1;
}

.card-content {
  position: relative;
  z-index: 2;
}

.feature-icon {
  font-size: 4rem;
  margin-bottom: 2rem;
  display: block;
  filter: drop-shadow(0 0 20px var(--glow-color));
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.feature-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.feature-desc {
  opacity: 0.8;
  font-size: 1.1rem;
  font-weight: 300;
}

@keyframes cardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 底部视觉区 */
.visual-footer {
  position: relative;
  height: 27vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(
      ellipse at top,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    linear-gradient(180deg, #111 0%, #000 100%);
}

.footer-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.footer-title {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
  animation: footerGlow 4s ease-in-out infinite;
}

.footer-subtitle {
  font-size: 1.5rem;
  opacity: 0.8;
  font-weight: 300;
  letter-spacing: 3px;
  margin-bottom: 2rem;
}

.beian-info {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.beian-info p {
  font-size: 0.9rem;
  opacity: 0.6;
  letter-spacing: 1px;
  margin: 0;
}

@keyframes footerGlow {
  0%,
  100% {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.6);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .main-title {
    font-size: 3rem;
  }

  .subtitle {
    font-size: 1.3rem;
  }

  .showcase-image {
    width: 100vw;
    height: 100vh;
  }

  .showcase-controls {
    padding: 0 1.5rem;
  }

  .showcase-btn {
    width: 60px;
    height: 60px;
  }

  .features-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .feature-card {
    padding: 2rem 1.5rem;
  }

  .footer-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 2.2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .showcase-image {
    width: 100vw;
    height: 100vh;
  }

  .showcase-controls {
    padding: 0 1rem;
  }

  .showcase-btn {
    width: 50px;
    height: 50px;
  }

  .features-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-title {
    font-size: 2rem;
  }
}
</style>
